<!--制作https://github.com/BluFis/
转载请注明作者
2018.07.19-->
<!DOCTYPE html>
<html lang="en">
<head>
	<title>A*寻路算法(threeJS)</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>

<script src="js/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/astar.js" ></script>

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

<script>


var container, scene, camera, renderer, controls;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
var windowWidth, windowHeight;
var length=200,flex=2;
threeStart();

function threeStart() {
    initThree();
    initScene();
    initCamera();   
    initLight();
    initGround();
    initGrid();
    initControl();
    initStatus();
    renderer.clear();
    animate();
}

function initThree(){
	
	if ( Detector.webgl )
		renderer = new THREE.WebGLRenderer( {antialias:true} );
	else
		renderer = new THREE.CanvasRenderer(); 
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById( 'ThreeJS' );
	container.appendChild( renderer.domElement );
	
}
function initCamera(){

		camera = new THREE.PerspectiveCamera( VIEW_ANGLE , ASPECT, NEAR, FAR);
	    camera.position.set(0,200,250);
	    camera.lookAt(scene.position);	
}
function initScene(){
	scene = new THREE.Scene();
}
function initLight(){
	var ambientLight = new THREE.AmbientLight(0x111111);
	scene.add(ambientLight);
	var ambientLight = new THREE.AmbientLight(0x111111);
	scene.add(ambientLight);
}
//播放动画请去掉注释
//var isMoved;
//var isMoved2;
//var i;
//var geometry;
//var line,line2,rota;
//function groundAnimate(){
//	
//	if(i>length/10){
//		return;
//	}
//	if(!isMoved){
//		scene.add(line);
//		isMoved=true;
//	}
//	if(line.position.z>( i * 10 ) - length/2){
//			line.position.z-=2;
//		}else if(line.position.z<( i * 10 ) - length/2){
//			line.position.z+=2;
//		}else{
////			i++;
////			isMoved=false;
////			isMoved2=false;
////			line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
//			//var line2=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
//			if(!isMoved2){
//				scene.add(line2);
//				isMoved2=true;
//			}
//			if(line2.position.x<( i * 10 ) - length/2){
//				line2.position.x+=1;
//			}else if(line2.position.x>( i * 10 ) - length/2){
//				line2.position.x-=1;
//			}else{
//				if(line2.rotation.y<90 * Math.PI / 180){
//					line2.rotation.y+=10*Math.PI/180;
//				}else if(line2.rotation.y>90 * Math.PI / 180){
//					line2.rotation.y-=10*Math.PI/180;
//				}else{
//					i++;
//				isMoved=false;
//				isMoved2=false;
//				line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
//				line2 = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
//				}
//				
//				
//			}
//		}
//	
//    requestAnimationFrame( groundAnimate );
//	
//}
function initGround(){
			// lines
//			isMoved=false;
//        isMoved2=false;
//i=0;
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - length/2, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( length/2, 0, 0 ) );
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
line2 = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) )
			//groundAnimate()
		var geometry = new THREE.Geometry();
	    geometry.vertices.push( new THREE.Vector3( - length/2, 0, 0 ) );
	    geometry.vertices.push( new THREE.Vector3( length/2, 0, 0 ) );
	
	            for ( var i = 0; i <= length/10; i ++ ) {
	
	                var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
	                line.position.z = ( i * 10 ) - length/2;
	                scene.add( line );
	
	                var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x808080, opacity: 1 } ) );
	                line.position.x = ( i * 10 ) - length/2;
	                line.rotation.y = 90 * Math.PI / 180;
	                scene.add( line );
	
	            }
	    var geometry = new THREE.PlaneGeometry( length, 10);
		var material = new THREE.MeshBasicMaterial( {color: 0x808080, side: THREE.DoubleSide} );
		var plane = new THREE.Mesh( geometry, material );
		plane.position.set(0,5,length/2);
		scene.add( plane );
		var plane = new THREE.Mesh( geometry, material );
		plane.rotation.y=90 * Math.PI / 180;
		plane.position.set(length/2,5,0);
		scene.add( plane );	
		var plane = new THREE.Mesh( geometry, material );
		plane.position.set(0,5,-length/2);
		scene.add( plane );
		var plane = new THREE.Mesh( geometry, material );
		plane.rotation.y=90 * Math.PI / 180;
		plane.position.set(-length/2,5,0);
		scene.add( plane );
		var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
		var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, side: THREE.BackSide } );
		var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
		scene.add(skyBox);

	}
function initControl(){
	controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function initGrid(){
		var geometry = new THREE.CubeGeometry( 8,8,8);
		var material = new THREE.MeshBasicMaterial( {color: 0xC0C0C0} );
		for(var i=0;i<length/10;i++){
			for(var j=0;j<length/10;j++){
				var salt=randomNum(1,7);
				if(salt<=flex){					
					var cube = new THREE.Mesh( geometry, material );
					cube.position.set(10*j-length/2+5,5,10*i-length/2+5);
					scene.add(cube);
				}
			}
		}
	}
function randomNum(minNum,maxNum){ 
		    switch(arguments.length){ 
		        case 1: 
		            return parseInt(Math.random()*minNum+1,10); 
		        break; 
		        case 2: 
		            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
		        break; 
		            default: 
		                return 0; 
		            break; 
		    } 
		}
function initStatus(){
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );
}

function updateSize() {
	if ( windowWidth != window.innerWidth || windowHeight != window.innerHeight ) {
		windowWidth  = window.innerWidth;
		windowHeight = window.innerHeight;
		renderer.setSize ( windowWidth, windowHeight );
	}
}

function animate() {
	render();
	controls.update();
	stats.update();
	requestAnimationFrame( animate );
}
function render() {
	updateSize();
	renderer.render( scene, camera );
}


</script>

</body>
</html>